<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--// 父组件向子组件 props-->
<!--// 子组件向父组件 $emit-->
<div id="app">
  <cpn v-bind:movie="movies" :cmessage="message">
  </cpn>
</div>
<template id="cpn">
  <div>
    <li v-for="mo in movie">{{mo}}</li>
    <h1>{{cmessage}}</h1>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    // 数组形式
    // props: ['movie', 'cmessage'],
    // 对象形式   好处就是可以对movie做一个数据类型的限制

    props: {
      // movie: Array,
      // cmessage: String,
      // 可以提供默认值
      cmessage: {
        type: String,
        default: 'aaaaa',
        required: true      //属性必须传否则报Missing required prop: "cmessage"
      },
      movie: {
        type: Array,
        // default: []      //2.5版本以下
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {}
  }
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好",
      movies: ['海王', '海泽王', '海尔兄弟']
    },
    components: {
      cpn
    }
  })
</script>
</body>
</html>
